<template>
	<div class="reg">
		<div class="seperate">
			<input type="text" v-model="regData.phone" placeholder="请输入您的手机号" />
		</div>

		<div class="seperate" style="position:relative">
			<input  v-show=" !showPWD " v-model="regData.password"  type="password" placeholder="请输入密码,长度6-18位" />
			<input  v-show=" showPWD " v-model="regData.password"  type="text" placeholder="请输入密码,长度6-18位" />
			<i class="iconfont icon-eyesclose" @click="switchKw()" >{{{ iconString }}}</i>
		</div>
		<div class="seperate">
			<div class="flex">
				<input type="text" v-model="regData.verify"  placeholder="请输入验证码" />
			</div>
			<div class="flex" style="padding-left: 20px;">
				<div class="codebg"  >
					<img v-show="verify_img.show"   :src="verify_img.src"  @click="reloadImg"  />
				</div>
			</div>
		</div>

		<div class="seperate">
			<div class="flex">
				<input type="text" v-model="regData.code"  placeholder="输入短信验证码" />
			</div>
			<div class="flex btncon" style="padding-left: 20px;">
				<button class="btn" @click=" sentSMS "  v-bind:class="{  'btn-grey':smsData.disableBtn }"  style="border-radius: 5px;margin: 0px;font-size: 14px;">{{ smsData.btnTxt }}</button>
			</div>
		</div>

		<div class="btncon">
			<button class="btn" @click="goReg">确认领取</button>
		</div>

		<com-alert
		:show.sync="alertDialog.show"
		:title.sync="alertDialog.title"
		:buttontxt.sync="alertDialog.buttontxt"
		:content.sync="alertDialog.content"
		></com-alert>

	</div>
</template>

<script>
var time_work = null;
import api from '../data/api';
import { mapGetters, mapActions } from 'vuex'
import ComAlert from './common/alert';

export default {

    props:{
        url:{
            default:'/user'
        }
    },

	data() {
		return {
			showPWD: false,
			iconString:'&#xe712;',
			count: 0,
			verify_img: { show: true, src: '' },
			regData: { phone: "", password: "", verify: "", code: "" },

			smsData: {
				stop: false,
				disableBtn: false,
				btnTxt: "获取动态码",
				timer: 0
			},
			busy: false
		};
	},


    components:{
        ComAlert
	},


    computed: {
		...mapGetters(['alertDialog'])
	},



	methods: {
		...mapActions([
            'setAlertDialog'
		]),

		switchKw(){
			if(this.iconString == '&#xe712;')
				this.iconString = '&#xe648;'
			else
				this.iconString = '&#xe712;'
			this.showPWD = !this.showPWD;
		},

		reloadImg(){
			this.verify_img.show = false;
			this.verify_img.src = '';
			var vm = this;
			var timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000;
			var rkey = vm.global.r_key()
			var pkey = vm.global.p_key()
			setTimeout(function(){
			    vm.verify_img.show = true;
			    vm.verify_img.src = api.user.verifyImg()+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
			},1);
		},


		sentSMS() {
			if (this.regData.phone == "" ||	this.regData.verify == "" || this.regData.password == "") {
				this.setAlertDialog({content:'请认真填完数据'})
				return;
			}

			if (this.smsData.disableBtn) {
				return;
			}

            console.log('sentSMS');
            this.smsData.disableBtn = true, this.startTimer();
            this.getCode();
		},

		async getCode() {
			var vm = this;
			if (this.busy) return;

			this.busy = true;
			var data = { phone: this.regData.phone, verify: this.regData.verify };
			var res = await api.user.send_reg_code(data);
			vm.busy = false;
			if (res.status == false) {
				this.setAlertDialog({content:res.msg})
				vm.reloadImg();
				vm.regData.verify = '';
				vm.stopTimeCount();
			}
		},

		updateSms() {
			console.log("get ");
			if (this.smsData.timer <= 0) {
				this.stopTimeCount();
			} else {
				this.smsData.timer--;
				this.smsData.btnTxt = "剩余" + this.smsData.timer + "秒";
			}
		},

		stopTimeCount() {
			clearInterval(time_work);
			this.smsData.timer = 0;
			this.smsData.stop = false;
			this.smsData.disableBtn = false;
			this.smsData.btnTxt = "重新发送";
		},

		startTimer() {
			clearInterval(time_work);
			//if(this.msn.timer>0) return;
			if (this.smsData.timer == 0) this.smsData.timer = 60;
			if (this.smsData.stop == false) {
				time_work = setInterval(this.updateSms, 1000);
			} else {
				clearInterval(time_work);
			}
		},

		async goReg() {
			var vm = this;
			if (this.busy) return;

			for (var i in this.regData) {
				if (this.regData[i] == "") {
					this.setAlertDialog({content:'请填写必参数!'})
					return;
				}
			}

			this.$store.dispatch('setShowLoading', true), this.busy = true;
			var res = await api.user.reg(this.regData);
			this.setAlertDialog({content:res.msg})


			vm.$store.dispatch('setShowLoading', false);
			if(res.status){
				setTimeout(() => {
					vm.$router.go('/openAccount')
				}, 2000);
			}else{
				vm.busy = false;
				vm.reloadImg();
				vm.regData.verify = '';
				vm.stopTimeCount();
			}
		}
	},
	ready() {
		var timestamp = Date.parse(new Date());
		timestamp = timestamp / 1000;

		var rkey = this.global.r_key()
		var pkey = this.global.p_key()

		this.verify_img.src = api.user.verifyImg()+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey;

		//测试帐号
		if(process.env.NODE_ENV == 'dev'){
			this.regData.phone = '18617037239';
			this.regData.password = '123456';
		}
	}
};
</script>

<style lang="scss" scoped>
.reg{
    background-color: rgba(255, 255, 255, 0.6);
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    margin-bottom: 15px;
}

.reg:after,
.reg:before {
    content: ' ';
    background: #ff7976;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    top: 80px;
}

.reg:after {
    left: -22px;
}


.reg:before {
    right: -22px;
}

.reg input {
    border: none;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0px 10px;
    font-size: 18px;
    color: #b7b5b3;
    border-radius: 5px;
}

.seperate {
    font-size: 0;
    text-align: left;
    margin-bottom:15px;
}


.seperate .trip {
    margin-bottom: 10px;
    color: #d63a3b;
    font-size: 15px;
    font-size: 14px;
    display: inline-block;
    width: 33.33%;
}


.seperate .trip i {
    font-size: 22px;
    vertical-align: bottom;
    color: #ff786e;
    margin-right: 5px;
}

.seperate .flex {
    font-size: 14px;
    display: inline-block;
    width: 50%;
    vertical-align: middle;
}

.codebg {
    background-color: #fff;
    border-radius: 5px;
    height: 50px;
    line-height: 50px;
}

.codebg a {
    display: block;
    width: 100%;
    height: 100%;
}

.code_con img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}


.btn {
    border: none;
    color: #fff;
    padding: 0px 10px;
    border-radius: 2px;
    font-size: 18px;
    height: 50px;
    width: 100%;
    /* border-radius: 50px; */
    line-height: 50px;
    /* margin-bottom: 15px; */
    background: #ff6666;
    background: -webkit-linear-gradient(#ff6666, #fe4e42);
    background: -o-linear-gradient(#ff6666, #fe4e42);
    background: -moz-linear-gradient(#ff6666, #fe4e42);
    background: linear-gradient(#ff6666, #fe4e42);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}


.icon-eyesclose {
	position: absolute;
    right: .35rem;
    top: .2rem;
    font-size: 28px;
	color:#999;
}


.btn-grey{
    color:#fff;
    background: none;
    background-color: #964d4b;
}

</style>
